<template>
  <div class="as-wrapper">
    <header>
      <span>高级搜索</span>
      <a href="javascript:void(0)" @click="$emit('hide')">收起</a>
    </header>
    <main>
      <Form inline size="small" :opts="opts" v-model="value"></Form>
      <el-button size="small" type="info" @click="$emit('search')"
        >搜索</el-button
      >
      <el-button size="small" @click="clear">清空搜索条件</el-button>
    </main>
  </div>
</template>

<script>
import Main from "@/layouts/components/Main.vue";
export default {
  components: { Main },
  name: "AS",
  methods: {
    clear() {
      const obj = { ...this.value };
      Object.keys(this.opts).forEach((key) => delete obj[key]);
      this.$emit("input", obj);
    },
  },
  props: {
    /**
     * 要绑定的值
     */
    value: {
      required: true,
      type: Object,
    },
    /**
     * 表单配置项
     */
    opts: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.as-wrapper {
  margin: 0 0 16px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  header {
    padding: 18px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    a {
      color: #399;
      font-size: 14px;
      text-decoration: none;
    }
  }
  main {
    padding: 10px;
  }
}
</style>